<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Examples</title>
  <meta name="description" content="">
  <meta name="keywords" content="">
  <link href="" rel="stylesheet">
  <style>
    #myDiv {
      width: 200px;
      height: 200px;
      background: #f00;
      display: none;
    } 
  </style>
  
</head>
<body>
  <div id="myDiv">
    
  </div>

  <script>

    //跨浏览器事件

    var EventUtil = {
      addHandler: function (element, type, handler) {
        if (element.addEventListener) {
          element.addEventListener(type, handler, false);
        } else if (element.attachEvent){
          element.attachEvent("on"+type, handler);
        } else {
          element["on" + type] = handler;
        }
      },

      removeHandler: function (element, type, handler) {
        if (element.addEventListener) {
          element.removeEventListener(type, handler, false);
        } else if (element.attachEvent){
          element.detachEvent("on"+type, handler);
        } else {
          element["on" + type] = null;
        }
      },

      getEvent: function(event) {
        return event ? event : window.event;
      },

      getTarget: function(event) {
        return event.target || event.srcElement;
      },

      getRelatedTarget: function(event) {
        if (event.relatedTarget){
            return event.relatedTarget;
        } else if (event.toElement){
            return event.toElement;
        } else if (event.fromElement){
            return event.fromElement;
        } else {
            return null;
        }
      },

      getButton: function(event){
        if (document.implementation.hasFeature("MouseEvents", "2.0")){
          return event.button;
        } else {
          switch(event.button){
            case 0:
            case 1:
            case 3:
            case 5:
            case 7:
                return 0;
            case 2:
            case 6:
                return 2;
            case 4: return 1;
          }
        }
      },

      getWheelDelta: function(event){
        if (event.wheelDelta){
          return (client.engine.opera && client.engine.opera < 9.5 ? -event.wheelDelta : event.wheelDelta);
        } else {
          return -event.detail * 40;
        }
      },

      preventDefault: function(event) {
        if(event.preventDefault) {
          return event.preventDefault();
        } else {
          event.returnValue = false;
        }
      },

      stopPropagation: function() {
        if(event.stopPropagation) {
          return event.stopPropagation();
        } else {
          return event.cancelBubble = true;
        }
      }
    };


    var div = document.getElementById("myDiv");
    EventUtil.addHandler(div, "click", function(event) {
      event = EventUtil.getEvent(event);
      var pageX = event.pageX,
          pageY = event.pageY;

      if(pageX === undefined) {
        pageX = event.clientX + (document.body.scrollLeft || document.documentElement.scrollLeft);
      }

      if(pageY === undefined) {
        pageY = event.clientY + (document.body.scrollTop || document.documentElement.scrollTop);
      }
      alert(pageX + "," + pageY);
    });



    EventUtil.addHandler(div, "mouseout", function(event) {
      event = EventUtil.getEvent(event);
      var target = EventUtil.getTarget(event);
      var relatetTatget = EventUtil.getRelatedTarget(event);
      alert(target.tagName + "," + relatetTatget.tagName);
    });

    (function() {
      function handleMouseWheel(event) {
        event = EventUtil.getEvent(event);
        var delta = EventUtil.getWheelDelta(event);
        if(delta < 0) {
          div.style.display = "block";
        } else {
          div.style.display = "none";
        }
      }

      EventUtil.addHandler(document, "mousewheel", handleMouseWheel);
      EventUtil.addHandler(document, "DOMMouseScroll", handleMouseWheel);
    })();
  </script>
</body>
</html>